/**
 * Created by maxiaoqiang on 2018/8/15.
 */
import React, {Component} from "react";

import {Select, Button, TreeSelect, Input, DatePicker, notification} from 'antd';

const {Option} = Select;
const {RangePicker} = DatePicker;

import "./index.less";
import {HttpClient} from "util/HttpClient";

class ProducePaperHeader extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value:"请选择科目",
            treeData:[],
            data: {
                subjectId: "",
                level: "-1",
                startTime: "",
                endTime: "",
                radio: "",
                radioValue: "",
                multi: "",
                multiValue: "",
                verdict: "",
                verdictValue: "",
                passValue: "60%"
            }
        }
    };

    componentDidMount() {
        // 获取类别获取科目
        // this.initListHandle("");
        this.initTreeData();
    }

    initTreeData=()=>{
        HttpClient.get("/v1/category/categoryandsubject")
            .then((response)=> {
                if (response.data.code == 200) {
                    let data = response.data.data;
                    // console.log(data);
                    let treeData = [];
                    for(let i = 0; i<data.length; i++){
                        let data1 = data[i];
                        let parentData = {
                            title: data1.name,
                            value: data1.id+"",
                            key: data1.id+"",
                            children:[]
                        };
                        if(data1.subjectList.length>0){
                            for(let j = 0; j <data1.subjectList.length; j++){
                                let data2  = data1.subjectList[j];
                                let childrenData = {
                                    title: data2.name,
                                    value: data1.id+"-"+data2.id,
                                    key: data1.id+"-"+data2.id
                                };
                                parentData.children.push(childrenData);
                            }
                        }
                        treeData.push(parentData);
                    }
                    this.setState({
                        treeData: treeData
                    })
                }
            });
    };

    handleChange = (name, value) => {
        console.log(value)
        if(name == "subject"){
            if(value.indexOf("-")>-1){
                this.setState({ value });
                this.state.data["subjectId"] = value.split("-")[1];
            }else{
                this.setState({ value:"请选择科目" });
            }
        }else{
            this.state.data[name] = value;
        }
    };

    handleChangeTimer = (name , value, dateString) => {
        this.state.data[name] = new Date(dateString).getTime() / 1000;
    };

    handleCommit = () => {
        console.log("-----试卷设置----", this.state.data);
        let data = this.state.data;
        if (data.subjectId == "") {
            notification["error"]({
                message: '请选择科目名称'
            });
            return;
        }
        if (data.startTime == "" || data.endTime == "") {
            notification["error"]({
                message: '请填写考试时间'
            });
            return;
        }
        if (data.startTime >= data.endTime) {
            notification["error"]({
                message: '结束时间必须大于开始时间'
            });
            return;
        }
        if(data.passValue.indexOf("%")==-1){
            notification["error"]({
                message: '及格线格式输入错误'
            });
            return;
        }
        this.props.createPaper(this.state.data);
    };

    render() {
        return (
            <div className="header-div">
                <div className="card-div">
                    <div className="card">
                        <div className="card-div">
                            <div className="card">
                                请选择科目
                            </div>
                            <div className="card">
                                <TreeSelect
                                    style={{ width: 200 }}
                                    value={this.state.value}
                                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                    treeData={this.state.treeData}
                                    placeholder="请选择科目"
                                    treeDefaultExpandAll = {false}
                                    onChange={(value)=>{this.handleChange("subject", value)}}
                                />
                            </div>
                            <div className="card">
                                <Select
                                    labelInValue
                                    defaultValue={{key: '-1'}}
                                    style={{width: 120}}
                                    onChange={(value) => {
                                        this.handleChange("level", value.key)
                                    }}
                                >
                                    <Option value="-1">请选择难度</Option>
                                    <Option value="0">简单</Option>
                                    <Option value="1">一般</Option>
                                    <Option value="2">难</Option>
                                    <Option value="3">困难</Option>
                                </Select>
                            </div>
                            <div className="card">
                                设置考试时间
                            </div>
                            <div className="card">
                                <DatePicker
                                    showTime
                                    placeholder="开始时间"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    onChange={(value, dateString)=>{this.handleChangeTimer("startTime",value, dateString)}}
                                />
                                <DatePicker
                                    showTime
                                    placeholder="结束时间"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    onChange={(value, dateString)=>{this.handleChangeTimer("endTime",value, dateString)}}
                                />
                            </div>
                        </div>
                        <div className="card-div">
                            <div className="card">
                                <div className="card-div">
                                    <div className="card">单选题</div>
                                    <div className="card">
                                        <Input
                                            type="number"
                                            placeholder="请输入单选题个数"
                                            onChange={(e) => {
                                                this.handleChange("radio", e.target.value)
                                            }}
                                        />
                                    </div>
                                    <div className="card">
                                        <Input
                                            type="text"
                                            placeholder="单选分值"
                                            onChange={(e) => {
                                                this.handleChange("radioValue", e.target.value)
                                            }}
                                        />
                                    </div>
                                    <div className="card-div">
                                        <div className="card">多选题</div>
                                        <div className="card">
                                            <Input
                                                type="number"
                                                placeholder="请输入多选题个数"
                                                onChange={(e) => {
                                                    this.handleChange("multi", e.target.value)
                                                }}
                                            />
                                        </div>
                                        <div className="card">
                                            <Input
                                                type="text"
                                                placeholder="分值(错选/总分)"
                                                onChange={(e) => {
                                                    this.handleChange("multiValue", e.target.value)
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div className="card-div">
                                    <div className="card">
                                        判断题
                                    </div>
                                    <div className="card">
                                        <Input
                                            type="number"
                                            placeholder="请输入判断题个数"
                                            onChange={(e) => {
                                                this.handleChange("verdict", e.target.value)
                                            }}
                                        />
                                    </div>
                                    <div className="card">
                                        <Input
                                            type="text"
                                            placeholder="请输入判断题分值"
                                            onChange={(e) => {
                                                this.handleChange("verdictValue", e.target.value)
                                            }}
                                        />
                                    </div>
                                    <div className="card">
                                        及格线
                                    </div>
                                    <div className="card">
                                        <Input
                                            type="text"
                                            placeholder="及格百分比"
                                            defaultValue={this.state.data.pass_value}
                                            onChange={(e) => {
                                                this.handleChange("passValue", e.target.value)
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="card">
                        <Button
                            style={{width: "160px", height: "80px"}}
                            type="primary"
                            onClick={this.handleCommit}

                        >
                            生成试卷
                        </Button>
                    </div>
                </div>
            </div>
        )
    }

}

export default ProducePaperHeader;